﻿@model ORM.ViewModels.Questions.QuestionListViewModel
<div id="questionList">
    @foreach (var item in Model.Questions)
    {   
        <table width="100%">
            <colgroup>
                <col span="1" style="width: 20%;" />
                <col span="1" style="width: 80%;" />
            </colgroup>
            <tr>
                <td>
                    <table width="100%">
                        <tr>
                            <td width="100%">
                                <div class="roundedField" style="background-color: powderblue; width: 100%; height: 20px;
                                    text-align: center; vertical-align: middle;">
                                    @Html.DisplayFor(modelItem => item.UpVotes) Điểm
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="roundedField" style="background-color: gainsboro; width: 100%; height: 20px;
                                    text-align: center; vertical-align: middle;">
                                    @Html.DisplayFor(modelItem => item.Answers) Trả lời
                                </div>
                            </td>
                        </tr>
                    </table>
                </td>
                <td style="vertical-align: top">
                    <b><a class="titleLink" href="/Question/Details/@Html.DisplayFor(modelItem => item.Id)" style="font-size: 15px">@Html.DisplayFor(modelItem => item.Title)</a>
                    </b>
                    <br />
                    <div style="font-size: 13px">
                        <a class="titleLink" href="/Question/Index?deviceId=@item.Model.Device.Id&manufacturerId=@item.Model.Manufacturer.Id&modelId=@item.Model.Id" title="Xem các câu hỏi cho @item.Model.Device.Name @item.Model.Manufacturer.Name @item.Model.Name">
                        @Html.DisplayFor(modelItem => item.Model.Device.Name)
                        @Html.DisplayFor(modelItem => item.Model.Manufacturer.Name)
                        @Html.DisplayFor(modelItem => item.Model.Name)
                        </a>
                    </div>
                    <div style="font-size: 11px">
                        <table width="100%" style="padding: 0px 0px 0px 0px">
                            <colgroup>
                                <col span="1" style="width: 20%;" />
                                <col span="1" style="width: 30%;" />
                                <col span="1" style="width: 50%;" />
                            </colgroup>
                            <tr>
                                <td style="padding: 0px 0px 0px 0px">
                                    <img src="/Content/Images/User-yellow.ico" width="15x" height="15px" />
                                    <a class="titleLink" href="/Account/Details/@Html.DisplayFor(modelItem => item.PostedBy.Id)">@Html.DisplayFor(modelItem => item.PostedBy.Username)</a>
                                </td>
                                <td>
                                    <img src="/Content/Images/Actions-contact-date.ico" width="15x" height="15x" />
                                    @item.PostedDate.ToString("HH:mm") ngày @item.PostedDate.ToString("dd-MM-yyyy")
                                                
                                </td>
                                <td style="text-align: right">
                                    @if (item.IsResolved)
                                    {
                                        <img src="/Content/Images/Actions-ok.ico" width="20x" height="20px" /> <span style="font-style: italic;
                                            color: gray; font-size: 11px">Đã được giải quyết</span>
                                    }
                                </td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
        </table>
        <hr style="border: dashed 1px slategrey" />
    }
    @* Paging *@
    <br />
    <table width="100%">
        <tr>
            <td style="text-align: left; width: 20%">
                @if (Model.PageNo != 1)
                {
                    var targetDiv = "questionList";
                    var previousPage = @Model.PageNo - 1;
                    <input type="image" src="/Content/Images/hide-left.ico" id="btnGoFirst" onclick="GoToQuestionPage('@Model.DeviceId', '@Model.ManufacturerId', '@Model.ModelId', '@Model.Condition', '@Model.QuestionSearch',1, '@targetDiv')" style="width: 20px; height: 20px;" title = "Xem Trang Đầu Tiên" />
                    <input type="image" src="/Content/Images/navigate-left.ico" id="btnGoPrevious" onclick="GoToQuestionPage('@Model.DeviceId', '@Model.ManufacturerId', '@Model.ModelId', '@Model.Condition', '@Model.QuestionSearch','@previousPage', '@targetDiv')" style="width: 20px; height: 20px;" title = "Xem Trang Trước" />
                }
            </td>
            <td style="text-align: center; width: 60%">
                @if (Model.TotalPage == 0)
                {
                    <span align="left">Không Có Câu Hỏi Nào</span>
                }
                else
                {
                    <span>Trang @Model.PageNo Trên Tổng Số @Model.TotalPage Trang</span>
                }
            </td>
            <td style="text-align: right; width: 20%">
                @if (Model.PageNo != Model.TotalPage && Model.TotalPage != 0)
                {
                    var targetDiv = "questionList";
                    var nextPage = @Model.PageNo + 1;
                    <input type="image" src="/Content/Images/navigate-right.ico" id="btnGoNext" onclick="GoToQuestionPage('@Model.DeviceId', '@Model.ManufacturerId', '@Model.ModelId', '@Model.Condition',  '@Model.QuestionSearch','@nextPage', '@targetDiv')" style="width: 20px; height: 20px" title="Xem Trang Sau" />
                    <input type="image" src="/Content/Images/hide-right.ico" id="btnGoNext" onclick="GoToQuestionPage('@Model.DeviceId', '@Model.ManufacturerId', '@Model.ModelId', '@Model.Condition',  '@Model.QuestionSearch','@Model.TotalPage', '@targetDiv')" style="width: 20px; height: 20px" title = "Xem Trang Cuối"/>
                }
            </td>
        </tr>
    </table>
</div>
